<!--
 * @Author: daokun.du@hand-china.com
 * @Date: 2023-06-05 13:48:13
 * @LastEditTime: 2023-06-05 14:41:07
 * @LastEditors: daokun.du@hand-china.com
 * @Description: 
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>el与data的两种写法</title>
    <!--引入VUE-->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1>功德:{{numbers.merit}}</h1>
      <button @click="numbers.merit++">点我功德加一</button>
      <hr/>
      <h1>缺德:{{numbers.quede}}</h1>
      <button @click="numbers.quede++">点我缺德加一</button>
      <h1>今天天气很{{info}}</h1>
      <button @click="changeWeather">切换天气</button>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false

    // VUE默认是可以监视多层级结构数据的改变的，但是VUE中的watch默认不能（可通过deep实现）
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'VUE',
        isHot:true,
        numbers:{
          merit: 0,
          quede: 0
        }
      },
      computed:{
        info(){
          return this.isHot ? '炎热' : '凉快'
        }
      },
      methods:{
        changeWeather(){
          this.isHot = !this.isHot
        }
      },
      watch:{
        'numbers.merit':{
          // 监视多级结构中某个属性的变化
          handler(){
            console.log("您的功德又增加了");
          }
        },
        'numbers.quede':{
          handler(){
            console.log("您又缺德了！");
          }
        },
        // 监视正常写法
        'numbers':{
          immediate:true, // 初始化的时让handler调用一下
          // 监视多级结构中所有属性的变化
          deep:true, // 开始深度监视
          handler(){
            console.log('多做好事,少做缺德事！');
          }
        },
        // // 监视正常写法
        // isHot:{
        //   immediate:true,
        //   handler(newValue, oldValue){
        //     console.log('isHot被修改了!', newValue, oldValue);
        //   }
        // },
        // 监视简写
        // isHot(newValue, oldValue){
        //   console.log('isHot被修改了!', newValue, oldValue);
        // }
      }
    })


    // 正常写法
    vm.$watch('isHot', {
      immediate: true, // 初始化的时让handler调用一下
      deep: true, // 开始深度监视
      handler(newValue, oldValue){
        console.log('isHot被修改了!', newValue, oldValue);
      }
    })

    // // 简写
    // vm.$watch('isHot', function(newValue, oldValue){
    //     console.log('isHot被修改了!', newValue, oldValue);
    // }) 


  </script>
</html>